```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynapseTeam 系统架构图和技术设计文档</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
        h1, h2 { color: #333; }
        svg { border: 1px solid #ccc; margin: 20px 0; display: block; }
        pre { background: #f4f4f4; padding: 10px; overflow: auto; border: 1px solid #ddd; }
        table { border-collapse: collapse; width: 100%; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        code { background: #f4f4f4; padding: 2px 4px; border-radius: 3px; }
    </style>
</head>
<body>

<h1>SynapseTeam 系统架构图和技术设计文档</h1>

<p><strong>版本：</strong> 1.1（更新：整合用户反馈，强调项目数据存储与进度管理）</p>
<p><strong>日期：</strong> 2025年8月4日</p>
<p><strong>作者：</strong> Grok 架构师</p>
<p><strong>目的：</strong> 本文档基于升级后的PRD（v2.0）、项目计划（Project_Plan.md）、原始需求及最新用户反馈，提供SynapseTeam的系统架构图、数据流图、组件图以及详细的技术设计。重点强调项目创建时的数据存储机制，确保进度信息（如AI员工处理进度、完成度）保存在SQLite中，避免仅依赖AI会话数据导致进展不符。文档内容详实可靠，可执行，支持跨平台桌面应用开发。</p>

<h2>1. 概述</h2>
<p>SynapseTeam 是一款跨平台桌面GUI应用，利用AI代理模拟软件开发团队。本地运行于Windows和macOS，支持沙盒文件操作以确保隐私。主要技术栈包括Tauri（优先，轻量级Rust安全）结合React用于UI，Node.js/Python用于后端/AI逻辑，LangChain/CrewAI用于代理协调。AI模型可本地（Ollama with Llama3/Phi-3）或远程（OpenAI GPT-4o, xAI Grok-3）。</p>

<p><strong>关键设计原则（更新）：</strong></p>
<ul>
    <li>模块化和可扩展：分离UI、代理逻辑和存储。</li>
    <li>性能：限制最多5个并行线程，避免资源耗尽；必要时降级为串行模式。</li>
    <li>安全：所有文件操作限于用户指定沙盒；所有操作记录审计日志。</li>
    <li>可扩展性：每个角色可配置不同模型；使用JSON schema确保输出一致性。</li>
    <li>可用性：类似VS Code的布局，实时甘特图；包含新手教程。</li>
    <li>项目数据管理（新增）：每个项目对应用户选择的目录作为沙盒，项目管理数据（如任务进度、完成度）持久化存储在SQLite临时数据库中，确保项目经理从数据库获取准确进度，避免仅依赖AI会话数据。</li>
</ul>

<p><strong>技术栈比较（来自PRD）：</strong></p>
<table>
    <tr><th>选项</th><th>优势</th><th>劣势</th></tr>
    <tr><td>Tauri</td><td>轻量（<50MB）、Rust安全、高性能</td><td>生态较小，插件开发复杂</td></tr>
    <tr><td>Electron</td><td>生态丰富（VS Code fork）、快速原型</td><td>资源占用高（>200MB）</td></tr>
</table>
<p><strong>推荐：</strong> MVP阶段优先Tauri；若需VS Code扩展，则评估Electron。</p>

<h2>2. 系统架构图（组件图）</h2>
<p>组件图展示了高层模块及其交互。前端处理UI，后端管理AI代理和文件操作，外部集成AI模型。存储层强调项目特定数据持久化。</p>

<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
    <!-- 背景 -->
    <rect width="800" height="500" fill="#f9f9f9"/>
    
    <!-- 前端层 -->
    <rect x="50" y="50" width="200" height="100" rx="5" fill="#add8e6"/>
    <text x="150" y="100" text-anchor="middle" font-size="14" font-weight="bold">前端 (Tauri/React)</text>
    <text x="150" y="120" text-anchor="middle" font-size="12">- UI组件 (Ant Design)</text>
    <text x="150" y="135" text-anchor="middle" font-size="12">- 聊天界面</text>
    <text x="150" y="150" text-anchor="middle" font-size="12">- 甘特图 (Frappe)</text>
    
    <!-- 后端层 -->
    <rect x="300" y="50" width="200" height="100" rx="5" fill="#90ee90"/>
    <text x="400" y="100" text-anchor="middle" font-size="14" font-weight="bold">后端 (Node.js/Python)</text>
    <text x="400" y="120" text-anchor="middle" font-size="12">- 代理协调器 (LangChain/CrewAI)</text>
    <text x="400" y="135" text-anchor="middle" font-size="12">- 任务调度器 (EventEmitter)</text>
    <text x="400" y="150" text-anchor="middle" font-size="12">- 文件管理器 (fs-extra, 沙盒化)</text>
    
    <!-- 存储层（更新：强调项目数据） -->
    <rect x="550" y="50" width="200" height="120" rx="5" fill="#ffd700"/>
    <text x="650" y="100" text-anchor="middle" font-size="14" font-weight="bold">存储 (项目特定)</text>
    <text x="650" y="120" text-anchor="middle" font-size="12">- 配置 (JSON)</text>
    <text x="650" y="135" text-anchor="middle" font-size="12">- 聊天历史 (SQLite, <10MB)</text>
    <text x="650" y="150" text-anchor="middle" font-size="12">- 沙盒文件</text>
    <text x="650" y="165" text-anchor="middle" font-size="12">- 进度数据 (任务完成度)</text>
    
    <!-- AI集成层 -->
    <rect x="200" y="200" width="400" height="100" rx="5" fill="#ffb6c1"/>
    <text x="400" y="250" text-anchor="middle" font-size="14" font-weight="bold">AI模型 (本地/远程)</text>
    <text x="400" y="270" text-anchor="middle" font-size="12">- 本地: Ollama (Llama3/Phi-3)</text>
    <text x="400" y="285" text-anchor="middle" font-size="12">- 远程: OpenAI API, xAI API</text>
    
    <!-- 用户层 -->
    <rect x="50" y="350" width="200" height="50" rx="5" fill="#d3d3d3"/>
    <text x="150" y="375" text-anchor="middle" font-size="14" font-weight="bold">用户 (桌面应用)</text>
    
    <!-- 连接线 -->
    <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L0,6 L9,3 z" fill="#000"/>
        </marker>
    </defs>
    <line x1="150" y1="150" x2="400" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="400" y1="150" x2="400" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="650" y1="170" x2="400" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="150" y1="350" x2="150" y2="150" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="400" y1="300" x2="150" y2="350" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

<h2>3. 数据流图</h2>
<p>数据流图描述了用户输入到输出渲染的流程，包括任务分解、代理执行和进度更新。更新：强调进度数据从代理执行流向存储层，再由项目经理查询用于甘特图显示。</p>

<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
    <!-- 背景 -->
    <rect width="800" height="450" fill="#f9f9f9"/>
    
    <!-- 用户输入 -->
    <circle cx="100" cy="200" r="40" fill="#add8e6"/>
    <text x="100" y="200" text-anchor="middle" font-size="12" font-weight="bold">用户输入 (聊天/项目创建)</text>
    
    <!-- 项目经理代理 -->
    <rect x="200" y="150" width="150" height="100" rx="5" fill="#90ee90"/>
    <text x="275" y="200" text-anchor="middle" font-size="12" font-weight="bold">项目经理代理 (LangChain)</text>
    
    <!-- 任务分解 -->
    <circle cx="450" cy="200" r="40" fill="#ffd700"/>
    <text x="450" y="200" text-anchor="middle" font-size="12" font-weight="bold">任务分解 (JSON)</text>
    
    <!-- 代理池 -->
    <rect x="550" y="150" width="150" height="100" rx="5" fill="#ffb6c1"/>
    <text x="625" y="200" text-anchor="middle" font-size="12" font-weight="bold">代理池 (10角色, WebWorkers)</text>
    
    <!-- 文件操作与输出 -->
    <circle cx="100" cy="350" r="40" fill="#d3d3d3"/>
    <text x="100" y="350" text-anchor="middle" font-size="12" font-weight="bold">文件操作 (沙盒, fs-extra)</text>
    <circle cx="450" cy="350" r="40" fill="#add8e6"/>
    <text x="450" y="350" text-anchor="middle" font-size="12" font-weight="bold">进度更新 (甘特图)</text>
    <circle cx="700" cy="350" r="40" fill="#90ee90"/>
    <text x="700" y="350" text-anchor="middle" font-size="12" font-weight="bold">输出渲染 (iframe/Canvas)</text>
    
    <!-- 存储层（新增：进度数据存储） -->
    <rect x="550" y="300" width="150" height="80" rx="5" fill="#ffd700"/>
    <text x="625" y="340" text-anchor="middle" font-size="12" font-weight="bold">存储 (SQLite进度数据)</text>
    
    <!-- 数据流箭头 -->
    <line x1="140" y1="200" x2="200" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="350" y1="200" x2="410" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="490" y1="200" x2="550" y2="200" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="700" y1="200" x2="700" y2="310" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="625" y1="250" x2="625" y2="300" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="550" y1="340" x2="140" y2="350" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="700" y1="340" x2="490" y2="350" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="700" y1="380" x2="660" y2="350" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
    <line x1="275" y1="250" x2="275" y2="350" stroke="black" stroke-width="2" marker-end="url(#arrow)"/> <!-- 项目经理查询存储 -->
    <text x="275" y="300" text-anchor="middle" font-size="10">查询进度</text>
</svg>

<h2>4. 技术设计文档（Markdown格式）</h2>
<pre><code>
# SynapseTeam 技术设计文档

## 4.1 模块设计

### 4.1.1 前端模块 (Tauri + React + Ant Design)
- **责任**：处理用户交互、布局渲染和实时更新。
- **关键组件**：
  - 左侧栏：角色选择器 (Menu组件，加载10角色图标，如👔项目经理)。
  - 中间面板：多标签输出渲染 (Tabs + Monaco Editor for code, Canvas for images)。
  - 右侧栏：聊天界面 (react-chat-ui，支持Markdown和附件上传)。
  - 顶部：甘特图 (Frappe Gantt，每5秒更新，从SQLite查询进度)。
- **交互**：通过Tauri IPC与后端通信。
- **性能优化**：响应式设计，支持13-27英寸屏幕；切换延迟<0.5秒。
- **验收标准**：布局加载<2秒，状态更新准确率>99%。

### 4.1.2 后端模块 (Node.js + Python)
- **责任**：AI代理协调、任务调度和文件操作。
- **代理协作**：
  - 项目经理：解析用户输入生成JSON任务列表 (LangChain结构化提示)；从SQLite查询进度数据生成甘特图，避免仅依赖AI会话。
  - 角色激活：最多5并行WebWorkers/child_process执行任务，实时更新SQLite中的进度（e.g., 完成度百分比）。
  - 调度：EventEmitter处理依赖和优先级队列，支持暂停/恢复；每个任务更新后立即持久化到数据库。
- **文件操作**：fs-extra限于沙盒，记录审计日志。
- **错误处理**：线程崩溃重启；API失效切换默认模型；进度不符时强制同步数据库。
- **验收标准**：并行执行无卡顿，CPU<50%；调度准确率>95%；进度数据一致性100%。

### 4.1.3 AI集成
- **本地**：Ollama运行Llama3/Phi-3，默认Phi-3以降低硬件要求。
- **远程**：openai-node/xAI API，配置API密钥。
- **混合使用**：JSON schema验证输出一致性。
- **约束**：响应<5秒（本地）；无效密钥检测>95%。

### 4.1.4 存储模块（更新：项目数据持久化）
- **配置**：config.json (角色-模型映射)。
- **历史**：SQLite (<10MB，聊天和日志)。
- **沙盒**：用户指定文件夹，所有操作受限。
- **项目管理数据（新增）**：每个项目创建时，在SQLite中创建表存储任务进度、完成度等（e.g., 表结构: tasks(id, role, task_desc, status, progress_pct, updated_at)）。AI员工执行时实时更新；项目经理查询该表生成甘特图，确保实际进展与显示一致。防止开发仅用AI会话数据，导致不符。

## 4.2 性能与安全考虑
- **性能**：最低硬件：8GB RAM, 4核CPU；线程限5，降级串行。
- **安全**：沙盒100%有效；GDPR合规，本地优先；审计日志覆盖率>95%。
- **风险缓解**：AI幻觉通过多轮验证；知识产权免责条款；进度不一致通过数据库校验。

## 4.3 开发与测试
- **CI/CD**：GitHub Actions打包Win/macOS。
- **测试**：Cypress (GUI), Pytest (AI)；覆盖率>80%；特别测试进度数据同步（e.g., 模拟中断，确保恢复一致）。
- **路线图集成**：MVP聚焦5角色、本地模型；Beta添加远程和并行。

## 4.4 扩展性
- **插件系统** (Could-have)：允许自定义角色/工具 (e.g., GitHub API)。
- **语音输入**：集成语音API，准确率>90%。
- **一键部署**：导出到GitHub/Vercel，成功率>98%。

此设计确保可执行性，与项目计划对齐。下一步：基于此文档进行设计审阅和原型开发。
</code></pre>

</body>
</html>
```